<script>
import $ from 'jquery';
export default {
  name: "CustomerRight",
  data(){
    return{

    }
  },
  methods:{

  },
  mounted() {

    $('.qq').mouseover(()=>{
      $('.qqimg').hide()
      $('.qqkefu').show()
    })
    $('.qq').mouseleave(()=>{
      $('.qqimg').show()
      $('.qqkefu').hide()
    })

    $('.phone').mouseover(()=>{
      $('.phoneIcon').hide()
      $('.phonekefu').show()
      $('.phoneImg').show()
    })
    $('.phone').mouseleave(()=>{
      $('.phoneIcon').show()
      $('.phonekefu').hide()
      $('.phoneImg').hide()
    })

    $('.cystiner').mouseover(()=>{
      $('.kefu').hide()
      $('.jishuzhichi').show()
      $('.jishu').show()
    })
    $('.cystiner').mouseleave(()=>{
      $('.kefu').show()
      $('.jishuzhichi').hide()
      $('.jishu').hide()
    })
  }
}
</script>

<template>
<div class="right">
  <div class="qq">
    <img class="qqimg" src="@/assets/qq.png" alt="">
    <p class="qqkefu">客服1</p>
  </div>
  <div class="phone">
    <a-icon class="phoneIcon" type="phone" />
    <img class="phoneImg" src="@/assets/kefu.png" alt="" width="180">
    <p class="phonekefu">客服2</p>
  </div>
  <div class="cystiner">
    <img class="kefu" src="@/assets/客服.png" alt="" width="55">
    <img class="jishuzhichi" src="@/assets/1730122073724.jpg" alt="" width="180">
    <p class="jishu">技术<br>支持</p>
  </div>
</div>
</template>

<style scoped lang="less">
.right{
  display: flex;
  flex-direction: column;
  justify-content: center;
  .qq{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div{
    cursor: pointer;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .qqkefu,.phonekefu,.jishu{
    color: #42b983;
    margin: 0;
    display: none;
  }
  .phone{
    position: relative;
    img{
      display: none;
      right: 60px;
      position: absolute;
    }
  }
  .cystiner{
    position: relative;
    .jishuzhichi{
      display: none;
      right: 60px;
      position: absolute;
    }
  }
}
</style>